<template>
	<div class="width-100-percent">
		<div v-if="!tableData || !tableData.length" class="width-100-percent margin-bottom-10">
			<el-button class="width-100-percent" size="small" icon="el-icon-plus" plain @click="onAddBtn">添加</el-button>
		</div>
		<div v-else class="option-box">
			<el-form :model="{}" :hide-required-asterisk="pageType === 'detail'" label-width="100px" :show-message="false">
				<el-row
					v-for="(item, index) in tableData"
					:key="index"
					class="option-item"
				>
					<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
						<el-form-item class="margin-bottom-10 margin-top-10" label="原料">
							<span v-if="pageType === 'detail'" class="read-only-2">{{ item.productName }}</span>
							<remote-search-product-input
								v-else
								placeholder="原料"
								default-stock-type="RAW_MATERIAL"
								only-key="productId"
								query-name="productName"
								:form-data="item"
								@on-select="onSelectProductChange($event, item, index)"
							></remote-search-product-input>
						</el-form-item>
					</el-col>
					<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
						<el-form-item class="margin-bottom-10 margin-top-10" label="单价">
							<div class="flex-start-center">
								<span class="read-only-2">{{ item.price }}</span>
							</div>
						</el-form-item>
					</el-col>
					<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
						<el-form-item class="margin-bottom-10 margin-top-10" label="数量">
							<div class="flex-start-center">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ item.number }}</span>
								<jk-number-input v-else v-model="item.number" placeholder="数量" @change="returnData" />
								<el-button v-if="pageType !== 'detail'" type="text" icon="el-icon-circle-plus" class="margin-left-10" @click="onAddBtn"></el-button>
								<el-button v-if="pageType !== 'detail'" type="text" icon="el-icon-remove" class="margin-left-10 margin-right-10" @click="onDeleteBtn(index)"></el-button>
							</div>
						</el-form-item>
					</el-col>
					<!--<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
						<el-form-item class="margin-bottom-10 margin-top-10" label="金额">
							<div class="flex-start-center">
								<span v-if="pageType === 'detail'" class="read-only-2">{{ item.amount }}</span>
								<jk-number-input v-else v-model="item.amount" placeholder="金额" @change="returnData" />
								<el-button v-if="pageType !== 'detail'" type="text" icon="el-icon-circle-plus" class="margin-left-10" @click="onAddBtn"></el-button>
								<el-button v-if="pageType !== 'detail'" type="text" icon="el-icon-remove" class="margin-left-10 margin-right-10" @click="onDeleteBtn(index)"></el-button>
							</div>
						</el-form-item>
					</el-col>-->
				</el-row>
			</el-form>
		</div>
	</div>
</template>
<script>

    import remoteSearchProductInput from './remote-search-product-input';

    export default {
        mixins: [],
        props: {
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            layoutConfig: {
                type: Object,
                default() {
                    return {};
                }
            },
            pageType: {
                type: String,
                default: ''
            },
            showTemplate: {
                type: [Boolean, String],
                default: 'false'
            }
        },
        components: {
            remoteSearchProductInput
        },
        data() {
            return {
                tableData: []
            };
        },
        methods: {
            onDeleteBtn(index) {
                this.tableData.splice(index, 1);
                this.returnData();
            },
            returnData() {
                this.$emit('return-data', JSON.parse(JSON.stringify(this.tableData)));
            },
            onSelectProductChange(e, item, index) {
                if (Object.keys(e).length) {
                    this.$set(this.tableData[index], 'productId', e.productId);
                    this.$set(this.tableData[index], 'productCode', e.productCode);
                    this.$set(this.tableData[index], 'productName', e.productName);
                    this.$set(this.tableData[index], 'productModels', e.productModels);
                    this.$set(this.tableData[index], 'price', e.price);
                }
                this.returnData();
            },
            onAddBtn() {
                if (this.tableData.length < 2) {
                    this.tableData.push({
                        'id': null,
                        'productId': '',
                        'productCode': '',
                        'productName': '',
                        'productModels': '',
                        'price': null
                    });
                }
                this.returnData();
            }
        },
        watch: {
            optionList: {
                handler(newVal) {
                    this.tableData = JSON.parse(JSON.stringify(newVal));
                },
                deep: true
            }
        }
    };
</script>
<style scoped lang="scss">
    @import "../option-box";
</style>
